<template>
  <div class="editTable">
    <div class="edit-table-toolbar">
      <div class="edit-table-toolbar__title">{{ title }}</div>
      <div class="edit-btn" v-if="!hideBtn">
        <slot name="btnsBefore"></slot>
        <template v-for="(i, index) in btnConfig">
          <el-button
            class="btn-text-blue"
            size="mini"
            :key="index"
            v-if="showBtn(i.name)"
            :icon="i.icon"
            @click="i.methons"
          >{{ i.text }}</el-button>
        </template>
        <slot name="btnsAfter"></slot>
      </div>
    </div>
    <div class="edit-table-content">
      <el-form ref="formTable" :model="tableConfig" :rules="rules" label-width="0px">
        <el-table
          :data="tableConfig.data"
          border
          :stripe="stripe"
          ref="editTable"
          :header-cell-style="headerStyle"
          :height="tableConfig.height"
          :max-height="tableConfig.maxHeight"
          :cell-style="tableSetting.cellStyle?tableSetting.cellStyle:null"
        >
          <el-table-column
            v-if="tableConfig.select && !hideBtn"
            type="selection"
            fixed="left"
            width="40"
          ></el-table-column>
          <el-table-column type="index" width="55" label="序号"></el-table-column>
          <template v-for="(item, index) in tableConfig.column">
            <el-table-column
              v-if="!item.isHide"
              :label="item.label"
              :width="item.width"
              :min-width="item.minWidth"
              :prop="item.prop"
              :key="index"
              align="center"
            >
              <template slot-scope="scope">
                <template v-if="index==0">{{scope.row.paramName}}</template>
                <el-form-item
                  v-else
                  :prop="'data.' + scope.$index + '.' + scope.column.property"
                  :rules="rules[item.prop]"
                >
                  <!-- <el-form-item :prop="'data.'+ scope.$index + '.'+item.prop"> -->
                  <template v-if="scope.row.editable">
                    <el-select
                      v-model="scope.row[scope.column.property]"
                      v-if="scope.row.enterType === 'select'"
                      :multiple="item.multiple"
                      :placeholder="item.placeholder || '请选择'"
                      :disabled="item.disabled"
                      @change="
                        val =>
                          changeSelete(
                            val,
                            item.text,
                            scope.$index,
                            item.seleteOption
                          )
                      "
                      size="mini"
                      class="w100"
                    >
                      <template v-for="item_s in item.seleteOption">
                        <el-option
                          v-if="
                            typeof scope.row[scope.column.property] == 'string'
                          "
                          :key="item_s.value"
                          :label="item_s.label"
                          :disabled="
                            item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                          "
                          :value="'' + item_s.value"
                        ></el-option>
                        <el-option
                          v-else-if="
                            typeof scope.row[scope.column.property] == 'number'
                          "
                          :key="item_s.value"
                          :label="item_s.label"
                          :disabled="
                            item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                          "
                          :value="
                            ('' + item_s.value).trim() == ''
                              ? ''
                              : parseInt(item_s.value)
                          "
                        ></el-option>
                        <el-option
                          v-else
                          :key="item_s.value"
                          :label="item_s.label"
                          :disabled="
                            item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                          "
                          :value="item_s.value"
                        ></el-option>
                      </template>
                    </el-select>
                    <el-date-picker
                      v-else-if="
                        [
                          'date',
                          'week',
                          'month',
                          'week',
                          'year',
                          'datetime',
                          'daterange',
                          'datetimerange'
                        ].includes(scope.row.enterType)
                      "
                      v-model="scope.row[scope.column.property]"
                      :title="scope.row[scope.column.property]"
                      class="w100"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :type="scope.row.enterType"
                      :disabled="item.disabled"
                      :format="dateFrm(scope.row.enterType)"
                      :value-format="dateFrm(scope.row.enterType)"
                      size="mini"
                      :placeholder="item.placeholder || '请选择'"
                    ></el-date-picker>
                    <el-input
                      v-else-if="scope.row.enterType === 'dept'&& scope.$index!=0"
                      :key="scope.$index"
                      size="mini"
                      type="textarea"
                      rows="2"
                      :placeholder="item.placeholder || '请选择'"
                      @click.native="
                        getOrgInfo(
                          scope.$index,
                          scope.row[scope.column.property],
                          item
                        )
                      "
                      v-model="scope.row[scope.column.property]"
                      :title="scope.row[scope.column.property]"
                      readonly
                      class="w100"
                    ></el-input>
                    <el-input
                      v-else-if="scope.row.enterType === 'number' "
                      :key="scope.$index"
                      size="mini"
                      :readonly="item.readonly"
                      :disabled="item.disabled"
                      :placeholder="item.placeholder || '请输入'"
                      :type="scope.row.enterType || ''"
                      @change="item.method ? item.method(scope.row) : ''"
                      v-model="scope.row[scope.column.property]"
                      :title="scope.row[scope.column.property]"
                      @wheel.native.prevent="stopScrollFun($event, scope.row.enterType)"
                      class="w100"
                    ></el-input>
                    <!-- -----------2021-03-11------------ -->
                    <el-input-number
                      size="mini"
                      v-else-if="scope.row.enterType === 'el-number'"
                      :key="scope.$index"
                      v-model="scope.row[scope.column.property]"
                      :title="scope.row[scope.column.property]"
                      :precision="item.precision"
                      :step="item.step"
                      :max="item.max"
                      :min="item.min"
                      :step-strictly="item.stepStrictly"
                      :disabled="item.disabled"
                      controls-position="right"
                      :placeholder="item.placeholder || '请输入'"
                      @change="
                        val => inputChange(val, item, scope.$index, scope.row)
                      "
                      class="w100"
                    ></el-input-number>

                    <!-- --------------------------------- -->

                    <!-- -----------2021-02-20------------ -->
                    <el-autocomplete
                      v-else-if="
                        scope.row.enterType == 'user-autocomplete' ||
                          scope.row.enterType == 'dept-autocomplete'
                      "
                      v-model="scope.row[scope.column.property]"
                      :fetch-suggestions="queryMemberAsync(item, scope.$index)"
                      class="w100"
                      size="mini"
                      :placeholder="item.placeholder || '请选择'"
                      :title="scope.row[scope.column.property]"
                      @select="
                        obj =>
                          handleMemberSelectAuto(
                            obj,
                            item,
                            scope.$index,
                            scope.row
                          )
                      "
                      @input="val => changeMemberAuto(val, item)"
                      @change="
                        val => inputChange(val, item, scope.$index, scope.row)
                      "
                      :disabled="item.disabled"
                      :clearable="item.clearable"
                    >
                      <el-button
                        slot="append"
                        :icon="
                          ['user-autocomplete'].includes(scope.row.enterType)
                            ? 'el-icon-user'
                            : 'el-icon-location'
                        "
                        :disabled="item.disabled || item.readonly"
                        @click="
                          goSeleteOrgMember(item, scope.row.enterType, scope.$index)
                        "
                      ></el-button>
                    </el-autocomplete>
                    <el-input
                      v-else-if="
                        [
                          'user',
                          'user-realNameMember',
                          'user-pdMember',
                          'dept',
                          'dept-orgAuth',
                          'dept-pdOrg'
                        ].includes(scope.row.enterType) 
                      "
                      size="mini"
                      @change="val => inputChange(val, item, scope.$index)"
                      v-model="scope.row[scope.column.property]"
                      :title="scope.row[scope.column.property]"
                      :disabled="item.disabled"
                      :placeholder="item.placeholder || '请选择'"
                      readonly
                    >
                      <el-button
                        slot="append"
                        :icon="
                          ['user', 'user-pdMember'].includes(scope.row.enterType)
                            ? 'el-icon-user'
                            : 'el-icon-location'
                        "
                        :disabled="item.disabled || item.readonly"
                        @click="
                          goSeleteOrgMember(item, scope.row.enterType, scope.$index)
                        "
                      ></el-button>
                    </el-input>
                    <!-- ---------------------------------------------- -->

                    <el-button
                      type="text"
                      size="small"
                      :icon="item.icon"
                      v-else-if="scope.row.enterType == 'textButton' "
                      @click="
                        item.buttonMethod
                          ? item.buttonMethod(scope.$index, scope.row)
                          : null
                      "
                    >{{ scope.row[scope.column.property] }}</el-button>
                    <el-input
                      v-else
                      :key="scope.$index"
                      size="mini"
                      :readonly="item.readonly"
                      :disabled="item.disabled"
                      :type="scope.row.enterType || ''"
                      :rows="item.rows || 1"
                      :placeholder="item.placeholder || '请输入'"
                      @click.native="item.clickMethod ? item.clickMethod(scope.row,scope.$index) : ''"
                      @change="item.method ? item.method(scope.row) : ''"
                      v-model="scope.row[scope.column.property]"
                      :title="scope.row[scope.column.property]"
                      class="w100"
                    ></el-input>
                  </template>
                  <template v-else>
                    <el-button
                      type="text"
                      size="small"
                      v-if="item.scopeType && item.scopeType == 'textButton'"
                      :icon="item.icon"
                      @click="
                        item.buttonMethod
                          ? item.buttonMethod(scope.$index, scope.row)
                          : null
                      "
                    >{{ scope.row[scope.column.property] }}</el-button>

                    <template v-else>
                      <el-tooltip
                        effect="dark"
                        v-if="item.showTooltip"
                        placement="top"
                        :content="
                        item.formatterToolTip
                        ?item.formatterToolTip(
                                scope.row[scope.column.property],
                                scope.row,
                                scope.column.property,
                                item.seleteOption
                              ):
                          item.formatter
                            ? item.formatter(
                                scope.row[scope.column.property],
                                scope.row
                              )
                            : item.text
                            ? formatterNull(scope.row[item.text])
                            : formatterNull(scope.row[scope.column.property])
                        "
                      >
                        <span class="table-cloumn__span--tooltip w100" style="display:inline-block">
                          {{
                          item.formatter
                          ? item.formatter(
                          scope.row[scope.column.property],
                          scope.row
                          )
                          : item.text
                          ? formatterNull(scope.row[item.text])
                          : formatterNull(scope.row[scope.column.property])
                          }}
                        </span>
                      </el-tooltip>
                      <span v-else>
                        {{
                        item.formatter
                        ? item.formatter(
                        scope.row[scope.column.property],
                        scope.row
                        )
                        : item.text
                        ? formatterNull(scope.row[item.text])
                        : formatterNull(scope.row[scope.column.property])
                        }}
                      </span>
                    </template>
                  </template>
                </el-form-item>
              </template>
            </el-table-column>
          </template>
          <el-table-column fixed="right" label="操作" width="60" v-if="showOperation">
            <template slot-scope="scope">
              <el-button @click="deleteItiem(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <dialogPublic
      :title="'信息选择'"
      :show.sync="showMember"
      @doSubmit="addSeleteMember"
      @doClose="() => (showMember = false)"
      appendTobody
    >
      <orgMemberSelect
        ref="orgMemberSelect"
        v-if="showMember"
        :seleteSetting="orgMemberSelect"
        :otherInfo="formData"
      ></orgMemberSelect>
    </dialogPublic>
  </div>
</template>
<script>
// import {
//   querystaffListPage, //查询用户（有分页）
// } from "@/api/common";
export default {
  // props: ["tableSetting", "formData", "hideBtn","stripe"],
  props: {
    tableSetting: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    hideBtn: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: true
    },
    showOperation: {
      type: Boolean,
      default: true
    },
    isEditable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: "表格标题",
      showMember: false,
      memberIndex: null,
      userList: [],
      editFormData: {},
      tableConfig: {
        select: true,
        data: [],
        column: []
      },
      btnConfig: [
        {
          name: "add",
          text: "新增",
          icon: "el-icon-plus",
          methons: () => {
            this.add();
          }
        },
        {
          name: "edit",
          text: "编辑",
          icon: "el-icon-edit",
          methons: () => {
            this.edit();
          }
        },
        {
          name: "delete",
          text: "删除",
          icon: "el-icon-delete",
          methons: () => {
            this.delete();
          }
        },
        {
          name: "save",
          text: "保存",
          icon: "el-icon-check",
          methons: () => {
            this.save();
          }
        }
      ],
      btnArr: [],
      orgMemberSelect: {},
      // //组织树选择人员
      // orgMemberSelect: {
      //   seleteType: "orgmember",
      //   props: {
      //     label: "organizationName",
      //     children: "children"
      //   },
      //   chosedData: []
      // },
      show: false,
      deptItem: {},
      rules: {}
    };
  },
  computed: {
    rowProp() {
      let row = new Object();
      this.tableConfig.column.map(i => {
        row[i.prop] = "";
      });
      return row;
    }
  },

  watch: {
    "tableSetting.maxHeight"() {
      this.tableConfig.maxHeight = this.tableSetting.maxHeight;
    },
    "tableSetting.title"() {
      this.title = this.tableSetting.title;
    },
    "tableConfig.data": {
      handler(val) {
        this.$emit("changeTableData", val);
      },
      deep: true
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let {
        btnArr,
        column,
        title,
        data,
        select,
        maxHeight,
        height
      } = this.tableSetting;
      this.btnArr = btnArr || [];
      this.title = title || "";
      this.tableConfig.column = column || [];
      this.tableConfig.data = data || [];
      this.tableConfig.select = select;
      this.tableConfig.maxHeight = maxHeight;
      this.tableConfig.height = height;
      this.tableConfig.data.map((i, index) => {
        i.rowIndex = index;
      });
      let rules = {};
      this.tableConfig.column.map(i => {
        if (i.required) {
          rules[i.prop] = [];
          let message = "";
          if (i.type === "text" || i.type === "textarea") {
            message = `请输入`;
          } else {
            message = `请选择`;
          }
          rules[i.prop].push({
            required: true,
            message: message + i.label,
            trigger: i.trigger || "blur"
          });
          if (i.rules) {
            rules[i.prop].push(i.rules);
          }
        }
      });
      this.rules = Object.assign({}, rules);
    },
    headerStyle() {
      return {
        borderRight: "none"
      };
    },
    showBtn(btn) {
      return this.btnArr.indexOf(btn) != -1;
    },
    //日期数据处理
    dateFrm(type) {
      if (type === "date" || type === "daterange") {
        return "yyyy-MM-dd";
      } else if (type == "datetime" || type === "datetimerange") {
        return "yyyy-MM-dd HH:mm:ss";
      } else if (type == "month") {
        return "yyyy-MM";
      } else if (type == "year") {
        return "yyyy";
      } else {
        return "";
      }
    },
    //点击新增
    add() {
      let len = this.tableConfig.data.length;
      let rowIndex = 0;
      if (len) {
        rowIndex = this.tableConfig.data[len - 1].rowIndex + 1;
      }
      // let nRow = Object.assign(
      //   {},
      //   { rowIndex: rowIndex, editable: true },
      //   this.rowProp
      // );
      let nRow = Object.assign(
        {},
        { rowIndex: rowIndex, editable: true },
        this.rowProp
      );
      if (this.tableSetting.addMethons) {
        this.$emit(
          "handleClickAdd",
          nRow,
          JSON.parse(JSON.stringify(this.tableConfig.data))
        );
      } else {
        //如果没有外部新增方法，则新增一行
        this.tableConfig.data.push(nRow);
      }
    },
    //点击编辑
    edit() {
      this.tableConfig.data.map((i, index) => {
        i.editable = true;
        this.$set(this.tableConfig.data, index, i);
      });
    },
    //点击删除
    async delete() {
      try {
        let selectRow = this.$refs.editTable.selection;
        if (this.tableSetting.hasOwnProperty("deleteMethods")) {
          let res = await this.tableSetting.deleteMethods(selectRow);
        }
        this.tableConfig.data = [...this.tableConfig.data].filter(x =>
          [...selectRow].every(y => y.rowIndex !== x.rowIndex)
        );
      } catch (error) {
        console.log(error);
      }
    },
    //单项删除
    async deleteItiem(data) {
      try {
        let selectRow = data;
        this.tableConfig.data = [...this.tableConfig.data].filter(
          x => selectRow.rowIndex !== x.rowIndex
        );
        if (this.tableSetting.hasOwnProperty("deleteMethods")) {
          let res = await this.tableSetting.deleteMethods(
            selectRow,
            this.tableConfig.data
          );
        }
      } catch (error) {
        console.log(error);
      }
    },

    //点击保存
    save() {
      this.$refs.formTable.validate(valid => {
        if (valid) {
          let { data } = this.tableConfig;
          data = JSON.parse(JSON.stringify(data));
          data.forEach(i => {
            delete i.rowIndex;
            delete i.editable;
          });
          this.$emit("save", data);
        } else {
          this.$message.error("列表资料未填写完整！");
        }
      });
    },
    //返回表单数据
    getFormData() {
      let { data } = this.tableConfig;
      return data;
    },
    //返回表格数据
    getTableData(needValid = true) {
      let { data } = this.tableConfig;
      return new Promise((resolve, reject) => {
        let { data } = this.tableConfig;
        data = JSON.parse(JSON.stringify(data));
        if (!needValid) {
          resolve(data);
          return;
        }
        this.$refs.formTable.validate(valid => {
          if (valid) {
            resolve(data);
          } else {
            // this.$message.warning("未填写完整!");
            reject("列表未填写完整");
          }
        });
      });
    },
    //设置表单数据
    setTableData(data) {
      data = JSON.parse(JSON.stringify(data));
      if (this.isEditable && !this.hideBtn) {
        //默认全部可以编辑
        data.map((i, index) => ((i.rowIndex = index), (i.editable = true)));
      } else {
        //不可编辑
        data.map((i, index) => (i.rowIndex = index));
      }
      this.$set(this.tableConfig, "data", [...data]);
    },
    //追加data
    pushData(data) {
      let arr = [...data];
      arr.map(i => {
        this.tableConfig.data.push(i);
      });
    },
    //下拉框选择
    changeSelete(val, text, index, option) {
      if (text) {
        let type = typeof val;
        let valText = "";
        let arr = [];
        if (type == "string") {
          arr = option.filter(i => i.value == val);
        } else {
          arr = [...option].filter(x => [...val].some(y => x.value == y));
        }
        if (arr) {
          arr = arr.map(i => {
            return i.label;
          });
          valText = arr.join();
        }
        this.tableConfig.data[index][text] = valText;
      }
    },
    //获取组织树
    getOrgInfo(index, value, item) {
      this.deptItem = Object.assign({}, { _index: index }, item);

      let arr = value ? value.split(",") : [];
      let ids = this.tableConfig.data[index][item.orgIdsStr] || "";
      let idsArr = ids ? ids.split(",") : [];
      let chosedData = [];

      this.orgMemberSelect = {
        seleteType: item.seleteType,
        props: item.treeProps,
        // chosedData: chosedData,
        column: [
          {
            label: "组织",
            prop: "orgName"
          }
        ]
      };

      arr.map((i, index) => {
        let obj = {};
        obj.id = idsArr[index];
        obj[this.orgMemberSelect.column[0].prop] = arr[index];
        chosedData.push(obj);
      });

      this.orgMemberSelect.chosedData = chosedData;

      this.show = true;
    },

    /**判断空值默认- */
    formatterNull(text) {
      if (text === null || text === undefined || text === "") {
        return "-";
      } else {
        return text;
      }
    },
    /**修改表格默认值 */
    setDefalutData(form) {
      this.tableConfig.data.map((i, index) => {
        let obj = Object.assign({}, i, form);
        this.$set(this.tableConfig.data, index, obj);
      });
    },
    setColumnOption(name, value) {
      let column = this.tableConfig.column;
      for (let i in column) {
        if (column[i].prop == name) {
          column[i].seleteOption = value;
          break;
        }
      }
    },
    setColumn(name, value) {
      let newColumn = [];
      let column = this.tableConfig.column;
      for (let i = 0; i < column.length; i++) {
        if (!column[i].prop == name) {
          newColumn.push(column[i]);
        } else {
          newColumn.push(value);
        }
      }
    },
    /**禁止输入框滚动事件 */
    stopScrollFun(evt, type) {
      if (type !== "number") {
        return true;
      }
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    formatterSelectName(value, option) {},
    /* -------------------2021-02-20------------------------- */
    //值改变事件（除下拉框）
    inputChange(val, item, index, row) {
      if (item.methods) {
        item.methods(val, index, row);
      }
    },
    //选择组织人员
    goSeleteOrgMember(item, type, index) {
      this.memberIndex = index;
      if (item.disabled) {
        return false;
      }
      this.currentItem = item;
      let value = this.editFormData[item.prop] || ""; //数据集
      let ids = this.editFormData[item.idsStr] || ""; //id数据集

      let arr = value ? value.split(",") : []; //对由多个对象组成的数据数组进行处理
      let idsArr = ids ? ids.split(",") : []; //对由多个对象组成的数据id数组进行处理

      let chosedData = []; //选中的数据
      let typePre = type.split("-")[0]; //分割type
      let typeBre = type.split("-")[1];
      this.memberType = typePre;
      if (typePre == "dept" || typePre == "deptMultiple") {
        //对不同的type进行处理
        this.orgMemberSelect = {
          //设置orgMemberSelect组件的初始值
          seleteType: typeBre ? typeBre : "org",
          radio: typePre == "dept", //单选
          props: {
            label: "organizationName",
            children: "children"
          },
          column: [
            {
              label: "组织",
              prop: "name"
            }
          ],
          chosedData: []
        };
        if (typeBre == "autocomplete") {
          this.orgMemberSelect.seleteType = "org";
        }
        arr.map((i, index) => {
          //对数据进行处理，已有的值存入最右边选中框的数组中
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (typePre == "user" || typePre == "userMultiple") {
        this.orgMemberSelect = {
          seleteType: typeBre ? typeBre : "orgmember",
          radio: typePre == "user", //单选
          props: {
            label: "organizationName",
            children: "children"
          },
          column: [
            {
              label: "用户名",
              prop: "name",
              width: 60
            }
          ],
          chosedData: []
        };
        if (typeBre == "autocomplete") {
          this.orgMemberSelect.seleteType = "orgmember";
        }
        //对值进行处理
        let deptCode = item.deptCodeStr
          ? this.editFormData[item.deptCodeStr] || ""
          : ""; //部门code
        let deptName = item.deptStr
          ? this.editFormData[item.deptStr] || ""
          : ""; //部门名称
        let phone = item.phoneStr ? this.editFormData[item.phoneStr] || "" : ""; //手机号
        let deptCodeArr = deptCode ? deptCode.split(",") : []; //当有批量的值时
        let deptNameArr = deptName ? deptName.split(",") : [];
        let phoneArr = phone ? phone.split(",") : [];
        arr.map((i, index) => {
          //对批量值进行处理，并且存入到最右边的选中框内
          let obj = {};
          obj.id = idsArr[index];
          obj.deptCode = deptCodeArr[index] || "";
          obj.deptName = deptNameArr[index] || "";
          obj.phone = phoneArr[index] || "";

          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      }
      this.orgMemberSelect.chosedData = chosedData;
      this.showMember = true;
    },
    //确定选择
    addSeleteMember() {
      let data = this.$refs.orgMemberSelect.getSeleteData();
      let names = "";
      let ids = "";
      if (data) {
        names = data
          .map(i => {
            return i[this.orgMemberSelect.column[0].prop];
          })
          .join();
        ids = data
          .map(i => {
            return i.id;
          })
          .join();
      }
      if (this.currentItem.idsStr) {
        this.$set(this.editFormData, this.currentItem.idsStr, ids);
        this.$set(
          this.tableConfig.data[this.memberIndex],
          this.currentItem.idsStr,
          ids
        );
      }
      this.$set(this.editFormData, this.currentItem.prop, names); //this.editFormData[this.currentItem.prop] = names;
      this.$set(
        this.tableConfig.data[this.memberIndex],
        this.currentItem.prop,
        names
      );
      this.memberIndex = null;
      this.showMember = false;
      if (this.currentItem.methods) {
        this.currentItem.methods(data, this.editFormData);
      }
    },
    //人员输入框搜索输入时触发
    queryMemberAsync(item) {
      return (queryString, cb) => {
        var restaurants = this.userList.map(i => {
          return { ...i };
        });
        var results = queryString
          ? restaurants.filter(this.createMemberFilter(queryString))
          : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 500 * Math.random());
      };
    },
    createMemberFilter(queryString) {
      return state => {
        if (state.value) {
          return (
            state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
          );
        }
      };
    },
    //获取人员信息
    getUserList(name) {
      let form = {
        name,
        page: 1,
        pageCount: 10
      };
      // querystaffListPage(form).then(res => {
      //   let data = res.data.list || [];
      //   data.map(i => {
      //     i.value = i.name;
      //     return i;
      //   });
      //   this.userList = data;
      // });
    },
    //人员输入时触发
    changeMemberAuto(val, item) {
      this.getUserList(val);
      if (item.changeMethods) {
        item.changeMethods(val);
      }
    },
    //人员选择输入框备选项
    handleMemberSelectAuto(obj, item, index, row) {
      if (item.selectMethods) {
        item.selectMethods(obj, item, index, row);
      } else {
        if (item.idsStr) {
          this.$set(this.tableConfig.data[index], item.idsStr, obj.code);
        }
        this.$set(this.tableConfig.data[index], item.prop, obj.value);
      }
    }
  }
};
</script>
<style lang="less" >
.editTable {
  // border: 1px solid #e1e1e1;
  margin-bottom: 10px;
  input {
    text-align: center;
  }
  .el-form-item__content {
    font-size: 14px;
    line-height: 20px;
    white-space: pre-wrap;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .edit-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  .edit-table-toolbar__title {
    font-weight: bold;
    margin-left: 10px;
  }
  .table-cloumn__span--tooltip {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .el-table td,
  .el-table th {
    text-align: center;
  }
}
</style>
